<template>
	<view class="content">
		<view class="subView">
			<view class="subItem" v-for="(item,index) in subList" :key="index" @tap="gotoChapter(item.sid,item.subject_name,item.textbook)">
				<i class="iconfont" :class="item.icon"></i>
				<view class="subject">{{item.subject_name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				subList: []
			}
		},
		onLoad() {
			this.getSub();
		},
		methods: {
			getSub() {
				var data = {
					student_id: uni.getStorageSync('currentChild').student_id
				}
				this.$zapi.apiPost('user/subject.Lists/subjectLists', data).then(res => {
					if (res.data.code == 200) {
						var data = res.data.data;
						for (var i = 0; i < data.length; i++) {
							data[i]['subject_name'] = data[i]['subject_name'].replace(/\s+/g, "");
							data[i].icon = this.getIcon(data[i].subject_name);
						}
						this.subList = data;
					} else {
						this.subList = [];
					}
				})
			},
			getIcon(name) {
				var icon = '';
				switch (name) {
					case '语文':
						icon = 'iconyuwen';
						break;
					case '数学':
						icon = 'iconshuxue';
						break;
					case '英语':
						icon = 'iconyingyu';
						break;
					case '物理':
						icon = 'iconwuli';
						break;
					case '化学':
						icon = 'iconhuaxueyongpin';
						break;
					case '生物':
						icon = 'iconshengwu';
						break;
					case '地理':
						icon = 'icondili';
						break;
					case '历史':
						icon = 'iconlishi';
						break;
					case '政治':
						icon = 'iconzhengzhi';
						break;
					case '思想品德':
						icon = 'iconzhengzhi';
						break;
					default:
						icon = 'iconyuwen';
						break;
				}
				return icon;
			},
			gotoChapter(sid,name,textbook) {
				uni.navigateTo({
					url: 'chapter?sid='+sid+'&subject_name='+name+'&textbook='+textbook
				})
			}
		}
	}
</script>

<style>
	.subView {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 50upx 10upx;
	}

	.subItem {
		width: 22%;
		text-align: center;
		min-height: 260upx;
		justify-content: center;
		position: relative;
		border: 2upx dashed #b1b1b1;
		border-radius: 16upx;
		margin: 50upx 8upx 0;
	}
	.iconfont{
		color: #4abbf7;
		font-size: 4.2em;
		position: relative;
		top: 14upx;
	}
	.subject {
		position: absolute;
		bottom: 1px;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 36Upx;
		color: #656565;
	}
</style>
